<template>
  <div class="rank">
    <el-dialog title="排行榜" :visible.sync="isShow" center :before-close="close">
        <el-tabs v-model="activeName" @tab-click="tabClick">
          <el-tab-pane label="月度排行榜" name="months"></el-tab-pane>
          <el-tab-pane label="年度排行榜" name="year"></el-tab-pane>
          <!-- <el-tab-pane label="返修率排行榜" name="repairRate"></el-tab-pane>
          <el-tab-pane label="发明数排行榜" name="invention_count"></el-tab-pane> -->
        </el-tabs>
        <el-select v-model="type" placeholder="请选择排名方式" @change='typeChange' class="typeSelect">
          <el-option
            v-for="item in typeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <listContent :type='type' ref="listContent"></listContent>

    </el-dialog>

  </div>
</template>

<script>
import moment from 'moment'
import listContent  from './listContent'
export default {
  components: {
    listContent
  },
  data () {
    return {
      isShow: false,
      tableData: [],
      loading: true,
      activeName: 'months',
      paramsRank: {
        type: 1,
      },
      type: 1,
      typeOptions: [
        {
          label: '案件完成数',
          value: 1
        },
        {
          label: '返修率',
          value: 2
        },
        {
          label: '发明数',
          value: 3
        },
      ]
    }
  },
  created () {

  },
  methods: {
    show () {
      this.isShow = true
      this.$nextTick(() => {
        this.paramsRank.start_time = `${moment().format("YYYY-MM")}-01`
        this.paramsRank.end_time = `${moment().format("YYYY-MM")}-31`
        this.$refs['listContent'].getTableData(this.paramsRank)
        this.$refs['listContent'].isloading()

      })

    },
    tabClick(tab, event) {
      if (tab.name == "months") {
        this.paramsRank.start_time = `${moment().format("YYYY-MM")}-01`
        this.paramsRank.end_time = `${moment().format("YYYY-MM")}-31`
      } else if (tab.name == "year") {
        this.paramsRank.start_time = `${moment().format("YYYY")}-01-01`
        this.paramsRank.end_time = `${moment().format("YYYY")}-12-31`
      }
      this.$refs['listContent'].isloading()
      this.$refs['listContent'].getTableData(this.paramsRank)
    },
    typeChange(val) {
      this.paramsRank.type = val
      if (val == 2) {
        this.paramsRank.sort_str = 'repairRate'
        this.paramsRank.sort_order = 'asc'
      } else {
        if (this.paramsRank.sort_str) {
          delete this.paramsRank.sort_str
          delete this.paramsRank.sort_order
        }
      }
      this.$refs['listContent'].isloading()
      this.$refs['listContent'].getTableData(this.paramsRank)
    },
    close () {
      this.isShow = false
      this.activeName = 'months'
      this.type = 1
    }
  }
}
</script>

<style lang='less' type='text/css'>
.rank {
  .el-dialog {
    max-width: 600px;
  }
  .list {
    width: 100%;
    .list_header {
      margin-bottom: 20px;
      .header_font {
        font-size: 16px;
        font-weight: 700;
      }
    }
    .list_content {
      max-height: 500px;
      overflow-y:auto;
      .content_item {
        height: 40px;
        i {
          line-height: 40px;
        }
      }
      .el-col {
        line-height: 40px;
        span {
          line-height: 40px;
        }
      }
      .font_bold {
        font-weight: 700;
      }
    }
    .list_icon {
      font-size: 24px;
    }
  }
  .typeSelect {
    margin : 10px 0;
    width: 50%;
  }
  .el-tabs {
    .el-tabs__header {
      .el-tabs__nav-scroll {
        display: flex;
        justify-content: center;
      }
    }
  }
}

</style>
